<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>半透明案例</title>
</head>
<style>
    .banner {
        position: relative;
        margin: 0 auto;
        width: 720px;
        height: 455px;
    }
    .bark {
        position: absolute;
        /* 据对定位的盒子显示具有行内块特点 ：
        加宽高生效，如没有宽度或内容，则盒子宽显示为0（不显示） */
        left: 0;
        bottom: 0;
        /* 绝对定位后，标签具有行内块标准 
            注意宽高需要写出 */
        /* 如子级和父级宽度相同，则width=100%也可以使用 */
        width: 720px;
        height: 150px;
        background-color: rgba(0,0,0,.5);
    }
</style>
<body>
    <div class="banner">
        <img src="./fovus.png" alt="">
        <div class="bark"></div>
    </div>
</body>
</html>